<route lang="json5">
{
	style: {
		navigationBarTitleText: '分享',
	},
}
</route>
<template>
	<view class="page">
		<view class="back">
			<wd-img
				style="border: 1rpx solid #fff"
				src="https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/5.jpeg"
				:width="341"
				:height="512"
			></wd-img>
			<!-- #ifdef H5 -->
			<UvQrcode :value="parseUrl" ref="qrcode" class="qrcode" :options="options" size="200rpx" />
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<canvas
				id="qrcode"
				v-if="parseUrl"
				canvas-id="qrcode"
				class="qrcode"
				style="width: 200rpx; height: 200rpx"
			></canvas>
			<!-- #endif -->
		</view>
	</view>
</template>
<script setup>
import { useUserStore } from '@/store'
// #ifdef MP-WEIXIN
import UQRCode from 'uqrcodejs'
// #endif
// #ifdef H5
import UvQrcode from '@/uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue'
// #endif

const userStore = useUserStore()

const parseUrl = computed(() => {
	if (process.env.NODE_ENV == 'production') {
		return `https://yqsd.jiucun.club/pages/login/register?invitationCode=${userStore.userInfo.invitationCode}`
	} else if (process.env.NODE_ENV == 'development') {
		return `http://192.168.1.105:9000/pages/login/register?invitationCode=${userStore.userInfo.invitationCode}`
	} else {
		return null
	}
})

// #ifdef MP-WEIXIN
onReady(() => {
	// 获取uQRCode实例
	var qr = new UQRCode()
	// 设置二维码内容
	qr.data = parseUrl.value
	// 设置二维码大小，必须与canvas设置的宽高一致
	qr.size = 100
	// 调用制作二维码方法
	qr.make()
	// 获取canvas上下文
	var canvasContext = uni.createCanvasContext('qrcode') // 如果是组件，this必须传入
	// 设置uQRCode实例的canvas上下文
	qr.canvasContext = canvasContext
	// 调用绘制方法将二维码图案绘制到canvas上
	qr.drawCanvas()
})
// #endif
// #ifdef H5
const qrcode = ref(null)
onMounted(() => {
	qrcode.value.make()
})
// #endif

const options = reactive({
	useDynamicSize: false,
	errorCorrectLevel: 'Q',
	margin: 10,
	areaColor: '#ffffff',
	backgroundColor: '#ffffff',
	foregroundImageSrc: null,
})
</script>
<style lang="scss" scoped>
:deep(.uqrcode) {
	bottom: 400rpx;
}

.page {
	padding-top: 88rpx;
	background-image: none;
	background-color: #517df7;

	.back {
		width: 682rpx;
		height: 1024rpx;
		// background-image: url(https://movieface.oss-cn-hangzhou.aliyuncs.com/icon/wx/background.png);
		background-size: contain;
		background-repeat: no-repeat;

		box-sizing: border-box;

		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;

		gap: 24rpx;

		position: relative;

		.qrcode {
			position: absolute;
			bottom: 12rpx;
			right: 12rpx;
		}
	}
}
</style>
